<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据代理Object.defineProperty方法</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        Vue.config.productionTip=false;
        let number=19
        let person={"name":"张三","sex":"男"};
        Object.defineProperty(person,"age",{
            // value: 18,
            enumerable: true, // 控制属性是否可枚举，默认值为false
            // writable: true, // 控制属性是否可以被修改，默认值为false
            configurable: true, //控制属性是否可以被删除，默认值为false

            // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get:function(){
                console.log("有人读取了age属性");
                return number;
            },

            // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log("有人设置了age属性,且值为",value);
                number=value;
            }
        });
        console.log(person);

        console.log(Object.keys(person));
    </script>
</body>

</html>